<template>
    <div class="filladdress" id="filladdress">
        <group>
            <x-input title="*收货人" name="username" placeholder="请填写收货人姓名" is-type="china-name"></x-input>
            
            <x-input title="*地址" name="address" placeholder="请填写收货人地址" ></x-input>
            <x-input title="*电话" name="mobile" placeholder="请填写收货人电话" keyboard="number" is-type="china-mobile"></x-input>
            <x-input title="备注" name="text" placeholder="备注信息" ></x-input>
        </group>
        <div class="care">
            <p>注意:</p>
            <div>
                请填写正确的收货信息（带 * 为必填项），注意，确认信息后不可对信息进行修改，请认真填写。我们将在您提交收货信息后的三个工作日内以快递的方式像您发出您的奖励，届时您可在我的订单中查看快递单号。如因您个人填写信息错误导致奖品发放失败，则视为您自动放弃本次奖品。
            </div>
        </div>

        <div class="btn">
             <p @click="show=true">无误，提交收货信息</p> 
        </div>




    <!-- <confirm v-model="show"
  
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
     cancel-text='返回修改/重填'
      confirm-text="确认无误,提交"
      class="confirm"
      >
        <p class="title">收货地址确认</p>
        <div class="content">
           <div class="msg"><p>收货人：</p><span> &nbsp;老王</span></div>
           <div class="msg"><p>地   址：</p> <span>广州市黄浦区科学城科汇金谷4街二巷6楼</span></div>
           <div class="msg"><p>电   话：</p> <span>13800138000</span></div>
           <div class="msg"><p>备   注：</p> <span>请发顺丰</span></div>
        </div>
      </confirm> -->

   
       <div v-transfer-dom>
      <alert class="alert" v-model="show" button-text='我知道了'  title="提交成功" @on-show="onShow" @on-hide="onHide"> 
        <p>
           您的地址已提交成功,我们将在七个工作日内以快递的方式为您寄出奖品,您也可以前往<router-link class="link" to="/MyDraw">我的订单</router-link>页面查看进度。
        </p>
        </alert>
    </div>







    </div>
</template>

<script>
import { XInput, Group,Confirm ,Alert } from "vux";
export default {
  components: {
    XInput,
    Group,
    Confirm,
    Alert 
  },
  data(){
      return{
          show:false
      }
  },
  methods:{
       onCancel(){
         console.log('onCancel');

        },
        onConfirm(){
         console.log('onConfirm');
            
        },
  }
};
</script>

<style scoped lang="less">
@import "../style/base.less";

.filladdress {
  background: #fff;

  .care {
    padding: 24 / @px;
    padding-bottom: 60/@px;
    p {
      font-size: 30 / @px;
      color: #333;
      margin-bottom: 20 / @px;
    }
    div {
      font-size: 28 / @px;
      color: #4d4d4d;
    }
  }

  .btn {
    padding: 24 / @px;
    padding-bottom: 62/@px;
    p {
      border-radius: 10 / @px;
      padding: 24 / @px 180 / @px;
      font-size: 36 / @px;
      text-align: center;
      background: #ffdb4f;
    }
  }

  .confirm{
     .title{
       text-align: center;
       font-size: 36/@px;
       margin-top: 28/@px;
       margin-bottom:60/@px;
     }
     .content{
       .msg{
       padding-left: 110/@px;
       position: relative;

       p{
         display: inline-block;
         position: absolute;
         left: 0;
       }
       }
     }
  }
}
</style>